<template>
  <div id="infoList">
    <h3 class="infoList_title">筛选区</h3>
    <ul class="infoList_filter">
      <li class="infoList_filter_item singular">
        <span>时间范围：</span>
        <el-radio
          v-model="filterData.timeDate"
          label="1"
        >今天</el-radio>
        <el-radio
          v-model="filterData.timeDate"
          label="2"
        >24小时</el-radio>
        <el-radio
          v-model="filterData.timeDate"
          label="3"
        >3天</el-radio>
        <el-radio
          v-model="filterData.timeDate"
          label="4"
        >7天</el-radio>
        <el-radio
          class="defineTimeBtn"
          v-model="filterData.timeDate"
          label="5"
        >
        <template slot-scope>
          自定义 
          <i>></i>
        </template>
        </el-radio>
        <el-date-picker
          :class="dateRangeClass"
          v-model="filterData.defineDate"
          type="daterange"
          range-separator="-"
          start-placeholder="开始日期"
          end-placeholder="结束日期">
        </el-date-picker>
      </li>
      <li class="infoList_filter_item">
        <span>舆论情绪：</span>
        <el-radio
          v-model="filterData.pubMood"
          label="1"
        >全部</el-radio>
        <el-radio
          v-model="filterData.pubMood"
          label="2"
        >正面</el-radio>
        <el-radio
          v-model="filterData.pubMood"
          label="4"
        >中立</el-radio>
        <el-radio
          v-model="filterData.pubMood"
          label="3"
        >负面</el-radio>
      </li>
      <li class="infoList_filter_item singular">
        <span>排序规则：</span>
        <el-radio
          v-model="filterData.sortRule"
          label="1"
        >发布时间降序</el-radio>
        <el-radio
          v-model="filterData.sortRule"
          label="2"
        >发布时间升序</el-radio>
        <el-radio
          v-model="filterData.sortRule"
          label="3"
        >相似文章</el-radio>
        <el-radio
          v-model="filterData.sortRule"
          label="4"
        >采集顺序</el-radio>
      </li>
      <li class="infoList_filter_item">
        <span>相似文章：</span>
        <el-radio
          v-model="filterData.similarArticle"
          label="1"
        >合并</el-radio>
        <el-radio
          v-model="filterData.similarArticle"
          label="2"
        >不合并</el-radio>
      </li>
      <li
        class="infoList_filter_item"
        style="width: 100%"
      >
        <span>来源区域：</span>
        <el-select
          @change="areaResourceSelect"
          v-model="filterData.areaResource"
          placeholder="请选择"
        >
          <el-option
            v-for="item in infoListData.areaOption"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
        <el-radio
          @change="areaResourceSelect2"
          v-model="filterData.areaResourceType"
          label="2"
        >省内</el-radio>
        <el-radio
          @change="areaResourceSelect2"
          v-model="filterData.areaResourceType"
          label="3"
        >省外</el-radio>
      </li>
      <li
        class="infoList_filter_item"
        style="width: 100%"
      >
        <span>来源类型：</span>
        <el-radio 
        v-model="filterData.typeResource" 
        v-for="item in infoListData.typeResourceList" 
        :label="item.value"
        :key="item.value">
        {{item.label}}
        </el-radio>
      </li>
      <li class="infoList_filter_btn">
        <el-button type="primary" @click="restFilter">恢复默认</el-button>
        <el-button type="success" @click="saveFilter">保存</el-button>
        <el-button type="danger">查询</el-button>
      </li>
    </ul>
    <h3
      class="infoList_title"
      style="margin:40px 0px 30px 0px"
    >监测结果</h3>
    <div class="tableBox">
      <span class="pageTotal">（在当前条件下筛选共123条）</span>
      <div class="pageSize">
        每页显示条数
        <el-select
          v-model="page.size"
          placeholder="请选择"
        >
          <el-option
            v-for="item in page.pageSize"
            :key="item"
            :label="item"
            :value="item"
          >
          </el-option>
        </el-select>
      </div>
      <el-input
      class="filterInput"
        placeholder="输入关键字在结果中搜索"
        prefix-icon="el-icon-search"
        v-model="page.filterText"
      >
      </el-input>
      <el-button class="filterBtn" type="primary">搜索</el-button>
      <div class="tableBtnGroup">
        <el-button size="mini" icon="daochu">导出</el-button>
        <el-button size="mini" icon="">全部导出</el-button>
        <el-button size="mini" icon="">加入素材</el-button>
        <el-button size="mini" icon="">全部加入素材</el-button>
        <el-button size="mini" icon="">收藏</el-button>
        <el-button size="mini" icon="">已读</el-button>
      </div>
      <el-button type="success" size="mini" class="visibilyBtn">隐藏摘要</el-button>
      <el-table
        ref="multipleTable"
        :data="tableData"
        tooltip-effect="dark"
        style="width: 100%"
        @selection-change="handleSelectionChange"
      >
        <el-table-column
          type="selection"
          width="35"
        >
        </el-table-column>
        <el-table-column label="全选本页">
          <template slot-scope="scope">
            <div class="newsBox">
              <h3 class="newsTitle">{{scope.row.title}}</h3>
              <span
                class="isRead"
                :class="scope.row.readed=='0'? '':'noRead'"
              >{{scope.row.readed=='0'? '已读':'未读'}}</span>
              <div class="newsContent">{{scope.row.content}}</div>
              <span class="newsTime">{{scope.row.publishTime}}</span>
              <span class="newsResource">文章来源：{{scope.row.articleRessource}}</span>
              <span class="newsTrigger">触发关键词：{{scope.row.triggerKey}}</span>
            </div>
            <div class="newsRelevant">
              <span class="rele">相关舆情{{scope.row.total}}条</span>
              <a href="#">查看原文</a><br>
              <span class="newsBtn news_warn">预警</span>
              <span class="newsBtn news_copy">复制文章</span>
              <span class="newsBtn news_collect">收藏</span>
              <span class="newsBtn news_read">已读</span>
              <el-select
                size="small"
                width="100px"
                v-model="scope.row.view"
                placeholder="请选择"
              >
                <el-option
                  v-for="item in scope.row.viewOption"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </div>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        @size-change="handleSizeChange"
        background
        @current-change="handleCurrentChange"
        :current-page="page.currentPage"
        :page-sizes="page.pageSize"
        :page-size="page.size"
        layout="prev, pager, next"
        :total="page.total"
      >
      </el-pagination>
    </div>
  </div>
</template>
<script>
import {formatDate} from '../../utils/common.js'
export default {
  props: ['infoListData'],
  data() {
    return {
      filterData: {
        defineDate: [],
        timeDate: "1", // 时间范围
        pubMood: "1", // 舆论情绪
        sortRule: "1", // 排序规则
        similarArticle: "1", // 相似文章
        areaResourceType: "2", // 来源区域
        areaResource: "",
        typeResource: "0" // 来源类型
      },
      tableData: [
        {
          title: "下周开始，襄阳这类交通工具将集中整治！",
          content:
            "如果没有记错的话，当初武汉发生疫情，也正是武汉如果没有记错的话，当初武汉发生疫情，也正是武汉开了两会之后出现的，而这次北京又如此巧合，发生在两如果没有记错的话，当初武汉发生疫情，也正是武汉开了两会之后出现的，而这次北京又如此巧合，发生在两开了两会之后出现的，而这次北京又如此巧合，发生在两会开完后，究竟有什么关联和偶发呢 ​",
          publishTime: "2019-03-12 09:12:00",
          readed: "0",
          articleRessource: "搜狐网",
          triggerKey: "疫情/两会/武汉",
          total: "10",
          view: "0",
          viewOption: [
            { value: "0", label: "正面" },
            { value: "1", label: "中立" },
            { value: "2", label: "负面" }
          ]
        },
        {
          title: "下周开始，襄阳这类交通工具将集中整治！",
          content:
            "如果没有记错的话，当初武汉发生疫情，也正是武汉开了两会之后出现的，错的话，当初武汉发生疫情，也正是武汉开了两会之后出现的，而这次北京又如此巧错的话，当初武汉发生疫情，也正是武汉开了两会之后出现的，而这次北京又如此巧而这次北京又如此巧合，发生在两会开完后，究竟有什么关联和偶发呢 ​",
          publishTime: "2019-03-12 09:12:00",
          readed: "1",
          articleRessource: "搜狐网",
          triggerKey: "疫情/两会/武汉",
          total: "10",
          view: "0",
          viewOption: [
            { value: "0", label: "正面" },
            { value: "1", label: "中立" },
            { value: "2", label: "负面" }
          ]
        },{
          title: "下周开始，襄阳这类交通工具将集中整治！",
          content:
            "如果没有记错的话，当初武汉发生疫情，也正是武汉开了两会之后出现的，错的话，当初武汉发生疫情，也正是武汉开了两会之后出现的，而这次北京又如此巧错的话，当初武汉发生疫情，也正是武汉开了两会之后出现的，而这次北京又如此巧而这次北京又如此巧合，发生在两会开完后，究竟有什么关联和偶发呢 ​",
          publishTime: "2019-03-12 09:12:00",
          readed: "1",
          articleRessource: "搜狐网",
          triggerKey: "疫情/两会/武汉",
          total: "10",
          view: "0",
          viewOption: [
            { value: "0", label: "正面" },
            { value: "1", label: "中立" },
            { value: "2", label: "负面" }
          ]
        },{
          title: "下周开始，襄阳这类交通工具将集中整治！",
          content:
            "如果没有记错的话，当初武汉发生疫情，也正是武汉开了两会之后出现的，错的话，当初武汉发生疫情，也正是武汉开了两会之后出现的，而这次北京又如此巧错的话，当初武汉发生疫情，也正是武汉开了两会之后出现的，而这次北京又如此巧而这次北京又如此巧合，发生在两会开完后，究竟有什么关联和偶发呢 ​",
          publishTime: "2019-03-12 09:12:00",
          readed: "1",
          articleRessource: "搜狐网",
          triggerKey: "疫情/两会/武汉",
          total: "10",
          view: "0",
          viewOption: [
            { value: "0", label: "正面" },
            { value: "1", label: "中立" },
            { value: "2", label: "负面" }
          ]
        },{
          title: "下周开始，襄阳这类交通工具将集中整治！",
          content:
            "如果没有记错的话，当初武汉发生疫情，也正是武汉开了两会之后出现的，错的话，当初武汉发生疫情，也正是武汉开了两会之后出现的，而这次北京又如此巧错的话，当初武汉发生疫情，也正是武汉开了两会之后出现的，而这次北京又如此巧而这次北京又如此巧合，发生在两会开完后，究竟有什么关联和偶发呢 ​",
          publishTime: "2019-03-12 09:12:00",
          readed: "1",
          articleRessource: "搜狐网",
          triggerKey: "疫情/两会/武汉",
          total: "10",
          view: "0",
          viewOption: [
            { value: "0", label: "正面" },
            { value: "1", label: "中立" },
            { value: "2", label: "负面" }
          ]
        },{
          title: "下周开始，襄阳这类交通工具将集中整治！",
          content:
            "如果没有记错的话，当初武汉发生疫情，也正是武汉开了两会之后出现的，错的话，当初武汉发生疫情，也正是武汉开了两会之后出现的，而这次北京又如此巧错的话，当初武汉发生疫情，也正是武汉开了两会之后出现的，而这次北京又如此巧而这次北京又如此巧合，发生在两会开完后，究竟有什么关联和偶发呢 ​",
          publishTime: "2019-03-12 09:12:00",
          readed: "1",
          articleRessource: "搜狐网",
          triggerKey: "疫情/两会/武汉",
          total: "10",
          view: "0",
          viewOption: [
            { value: "0", label: "正面" },
            { value: "1", label: "中立" },
            { value: "2", label: "负面" }
          ]
        },{
          title: "下周开始，襄阳这类交通工具将集中整治！",
          content:
            "如果没有记错的话，当初武汉发生疫情，也正是武汉开了两会之后出现的，错的话，当初武汉发生疫情，也正是武汉开了两会之后出现的，而这次北京又如此巧错的话，当初武汉发生疫情，也正是武汉开了两会之后出现的，而这次北京又如此巧而这次北京又如此巧合，发生在两会开完后，究竟有什么关联和偶发呢 ​",
          publishTime: "2019-03-12 09:12:00",
          readed: "1",
          articleRessource: "搜狐网",
          triggerKey: "疫情/两会/武汉",
          total: "10",
          view: "0",
          viewOption: [
            { value: "0", label: "正面" },
            { value: "1", label: "中立" },
            { value: "2", label: "负面" }
          ]
        },{
          title: "下周开始，襄阳这类交通工具将集中整治！",
          content:
            "如果没有记错的话，当初武汉发生疫情，也正是武汉开了两会之后出现的，错的话，当初武汉发生疫情，也正是武汉开了两会之后出现的，而这次北京又如此巧错的话，当初武汉发生疫情，也正是武汉开了两会之后出现的，而这次北京又如此巧而这次北京又如此巧合，发生在两会开完后，究竟有什么关联和偶发呢 ​",
          publishTime: "2019-03-12 09:12:00",
          readed: "1",
          articleRessource: "搜狐网",
          triggerKey: "疫情/两会/武汉",
          total: "10",
          view: "0",
          viewOption: [
            { value: "0", label: "正面" },
            { value: "1", label: "中立" },
            { value: "2", label: "负面" }
          ]
        },{
          title: "下周开始，襄阳这类交通工具将集中整治！",
          content:
            "如果没有记错的话，当初武汉发生疫情，也正是武汉开了两会之后出现的，错的话，当初武汉发生疫情，也正是武汉开了两会之后出现的，而这次北京又如此巧错的话，当初武汉发生疫情，也正是武汉开了两会之后出现的，而这次北京又如此巧而这次北京又如此巧合，发生在两会开完后，究竟有什么关联和偶发呢 ​",
          publishTime: "2019-03-12 09:12:00",
          readed: "1",
          articleRessource: "搜狐网",
          triggerKey: "疫情/两会/武汉",
          total: "10",
          view: "0",
          viewOption: [
            { value: "0", label: "正面" },
            { value: "1", label: "中立" },
            { value: "2", label: "负面" }
          ]
        },{
          title: "下周开始，襄阳这类交通工具将集中整治！",
          content:
            "如果没有记错的话，当初武汉发生疫情，也正是武汉开了两会之后出现的，错的话，当初武汉发生疫情，也正是武汉开了两会之后出现的，而这次北京又如此巧错的话，当初武汉发生疫情，也正是武汉开了两会之后出现的，而这次北京又如此巧而这次北京又如此巧合，发生在两会开完后，究竟有什么关联和偶发呢 ​",
          publishTime: "2019-03-12 09:12:00",
          readed: "1",
          articleRessource: "搜狐网",
          triggerKey: "疫情/两会/武汉",
          total: "10",
          view: "0",
          viewOption: [
            { value: "0", label: "正面" },
            { value: "1", label: "中立" },
            { value: "2", label: "负面" }
          ]
        }
      ],
      multipleSelection: [],
      page: {
        filterText: "",
        currentPage: 1,
        pageSize: [10, 20, 30, 50, 100],
        size: 10,
        total: 100
      },
      filterRegionType: '',
      dateRangeClass: 'dn'
    };
  },
  methods: {
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
    },
    areaResourceSelect(val){
      console.log(val)
      this.filterRegionType = val.toString();
      this.filterData.areaResourceType = '';
    },
    areaResourceSelect2(val){
      this.filterRegionType = val.toString();
      this.filterData.areaResource = '';

    },
    saveFilter(){
      let param = {};
      param.id = this.infoListData.caseId;
      param.filterTimeType = parseInt(this.filterData.timeDate);
      if(this.filterData.timeDate == '5'){
        param.filterStartTime = this.formatDate(this.filterData.defineDate[0]);
        param.filterEndTime = this.formatDate(this.filterData.defineDate[1]);
      }else{
        param.filterStartTime = '';
        param.filterEndTime = '';
      }
      param.filterSortType = parseInt(this.filterData.sortRule);
      param.filterEmotionType = parseInt(this.filterData.pubMood);
      param.filterSimilarType = parseInt(this.filterData.similarArticle);
      param.filterFromType = this.filterData.typeResource;
      param.filterRegionType = this.filterRegionType;
      this.$Api.saveCondition(param).then((res) => {
        if(res.code == '200'){
          console.log(res)
        }
      })
    },
    restFilter(){
      this.filterData.timeDate = '1';
      this.filterData.defineDate = [];
      this.filterData.pubMood = '1';
      this.filterData.sortRule = '1';
      this.filterData.similarArticle = '1';
      this.filterData.areaResource = '';
      this.filterData.areaResourceType = '2';
      this.filterData.typeResource = '0';
    },
    formatDate (time){
        let date = new Date(time)
        return formatDate(date,'yyyy-MM-dd hh:mm:ss') //年-月-日 时分
    }
  },
  created(){
    this.$bus.$on('infoFilter', msg => {
      this.filterData.timeDate = msg.filterTimeType.toString();
      this.filterData.defineDate = [];
      if(msg.filterStartTime && msg.filterEndTime){
        this.filterData.defineDate.push(new Date(msg.filterStartTime));
        this.filterData.defineDate.push(new Date(msg.filterEndTime));
      }else{
        this.filterData.defineDate = []
      }
      
      this.filterData.pubMood = msg.filterEmotionType.toString();
      this.filterData.sortRule = msg.filterSortType.toString();
      this.filterData.similarArticle = msg.filterSimilarType.toString();
      if(msg.filterRegionType == '2' || msg.filterRegionType == '3'){
        this.filterData.areaResourceType = msg.filterRegionType;
        this.filterData.areaResource = '';
      }else{
        this.filterData.areaResourceType = '';
        this.filterData.areaResource = parseInt(msg.filterRegionType);
      }
      this.filterRegionType = msg.filterRegionType;
      this.filterData.typeResource = msg.filterFromType;
    })
  },
  computed:{
    timeDateSelect(){
      return this.filterData.timeDate
    }
  },
  watch:{
    timeDateSelect(val){
      if(val == '5'){
        this.dateRangeClass = ''
      }else{
        this.dateRangeClass = 'dn'
      }
    }
  }
};
</script>
<style>
</style>